Getting Started with React Development with the React Suite Library — Grid Columns and Flexbox

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Column Gutter and Spacing

We can add a gutter to the column with the gutter prop:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row gutter={16}>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
        </Row>
      </Grid>
    </div>
  );
}

The unit is in pixels.

We can set the number of columns to offset with xsOffset :

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row gutter={16}>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2}>xs={2}</Col>
          <Col xs={2} xsOffset={16}>
            xs={2}
          </Col>
        </Row>
      </Grid>
    </div>
  );
}

mdOffset , smOffset , lgOffset lets us set offsets for the other breakpoints.

We can push and pull columns with the xsPush and xsPull props:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row gutter={16}>
          <Col xs={6} xsPush={6}>
            xs=6
          </Col>
          <Col xs={6} xsPull={6}>
            xs=6
          </Col>
        </Row>
      </Grid>
    </div>
  );
}

We can replace xs with the other breakpoints to set push and pull for the other breakpoints.

We can hide columns by breakpoints.

For example, we can write:

import React from "react";
import { Grid, Row, Col } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Grid fluid>
        <Row>
          <Col md={6} xsHidden>
            md=6
          </Col>
          <Col xs={6}>xs=6</Col>
        </Row>
      </Grid>
    </div>
  );
}

xsHidden hides the column with the xs breakpoint is hit.

We can replace xs with the other breakpoints to hide it.

FlexboxGrid

We can add a flexbox layout with the FlexboxGrid component.

The grid is divided into 24 columns.

For instance, we can write:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <FlexboxGrid>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={6}>colspan={6}</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

to add FlexboxGrid.Item components to add columns.

colspan lets us set the number of columns.

We can set how the items are laid out with the justify prop:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <FlexboxGrid justify="center">
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

We can use other justify-content values with justify .

Also, we can set the align prop:

import React from "react";
import { FlexboxGrid } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <FlexboxGrid align="middle" style={{ height: 300 }}>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
        <FlexboxGrid.Item colspan={4}>col</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

Any align-items value can be set as the value of the align prop.

Conclusion

We can space column spacing and add flexbox containers into our React app with React Suite.